<template>
  <div>
    <el-button size="mini" type="primary" icon="fa fa-plus" @click="handleAdd">
      新增
    </el-button>
    <H-editItem
      v-model="dialogVisible"
      :data-form="dataForm"
      :dialog-config="dialogConfig"
      :data-form-rules="dataFormRules"
      :dialog-tag="dialogTag"
      width="600px"
      @submitForm="submitForm"
      labelwidth="100px"
      title="弹框标题"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dataForm: {
        id: 0,
        name: '',
        number: '',
        remark: '',
      },
      dialogConfig: [
        { title: '角色名', code: 'name', type: 'input' },
        { title: '排序', code: 'number', type: 'number' },
        { title: '备注', code: 'remark', type: 'textarea' },
      ],
      dialogTag: 'addItem',
      dataFormRules: {
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur',
          },
          {
            min: 1,
            max: 10,
            message: '最多可输入10个字符',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    handleAdd() {
      this.dialogVisible = true
      this.dialogTag = 'addItem'
    },
    submitForm(params) {
      console.log('表单入参', params)
    },
  },
}
</script>
